<template>
	<view v-if="!isAppPaying">
		<u-navbar title='材料详情' bgColor="transparent" :autoBack='true' :placeholder="true"></u-navbar>
		<view class="flex select">
			<uni-data-select @change="changeState"  placeholder="订单类型"  style="width: 250rpx;"  v-model="state" :localdata="stateList"></uni-data-select>
			<uni-data-select @change="changeState"  placeholder="支付状态"  style="width: 250rpx;"  v-model="isPay" :localdata="isPayList"></uni-data-select>
			<uni-data-select @change="changeState"  placeholder="出库状态"  style="width: 250rpx;"  v-model="outStatus" :localdata="outStatusList"></uni-data-select>
		</view>
		<view class="content">
			<view style="width: 100%;height: 50vh;" v-if="list.length===0">
				<u-empty
				        mode="data"
				        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
						width="100%"
						height="100%"
				>
				</u-empty>
			</view>
			<view class="item" v-for="(v,i) in list" :key="i" style="background-color: white;border-radius: 20rpx;">
				<view class="flex" style="justify-content: space-between;align-items: center;">
					<view class="flex" >
						<view class="label">时间:</view>
						<view class="val" style="width: unset;">{{v.createTime}}</view>
					</view>
					<view class="flex">
						<view class="label">总价：</view>
						<view class="val" style="width: unset;">{{v.totalPrice}}</view>
					</view>
					<!-- <view class="val" style="width: unset;" :style="{'color':v.isPay?'#269846':'#f7bf20'}">{{v.isPay?'已支付':'未支付'}}</view> -->
				</view>
				<view class="flex" style="margin-top:30rpx;">
					<view class="label">店门：</view>
					<view class="val" >{{v.assignName}}</view>
				</view>
				<view class="flex" style="margin-top:30rpx;">
					<view class="label">地址：</view>
					<view class="val">{{v.address}}</view>
				</view>
				
				<view class="flex" style="justify-content: space-between;align-items: center;margin-top:30rpx;">
					<view class="flex" >
						<view class="label">类型：</view>
						<view class="val" style="width: unset;">
							<text v-if="v.state===1" style="color:#2d7bec">报货</text>
							<text v-if="v.state===2"  style="color:#f56c6c">补货</text>
							<text v-if="v.state===3"  style="color:#289846">售后补发</text>
						</view>
					</view>
					<view class="flex">
						<view class="label">状态：</view>
						<view class="val" style="width: unset;">
							<text v-if="v.outStatus===0" style="color:#fac529">未出库</text>
							<text v-else :style="{'color':color}" style="color:#f56c6c">已出库</text>
						</view>
					</view>
				</view>
				<u-collapse
				:border="false"
				 >
					<u-collapse-item
					  title="材料明细"
					  name="materail"
					  :border="false"
					>
						<view >
							<view class="flex bewteen alignItem" style="font-size:26rpx;text-align: center;padding-top: 30rpx;border-top: 1px solid #eee;border-bottom: 1px solid #eee;" >
								<view style="width: 50%;font-weight: 700;">名称</view>
								<view style="width: 50%;font-weight: 700;">数量</view>
								<view style="width: 50%;font-weight: 700;">单价</view>
							</view>
							<scroll-view class="scrollView" scroll-y="true">
								<view class="flex bewteen alignItem" style="font-size:24rpx;text-align: center;border-bottom:1rpx solid #eee"
								  v-for="(item,index) in v.list" :key="index">
									<view style="width: 50%;">{{item.name}}</view>
									<view style="width: 50%;">{{item.buyCount}}</view>
									<view style="width: 50%;">{{item.salePrice}}</view>
								</view>
							</scroll-view> 
						</view>
						<!-- <u-button  :loading="isLoad" shape="circle" type="primary" @click="throttlePay(v.wechatOrderId)" v-if="!v.isPay&&loginType===3" :disabled="isLoad">去支付</u-button> -->
					</u-collapse-item>
				</u-collapse>
				<!-- <view class="state">
					<image
						v-if="v.isPay"
						src="https://renovationcdn.jiachuangnet.com/yizhifu.png"
						style="width: 116rpx;height:100rpx;">
					</image>
					<image
						v-else
						src="https://renovationcdn.jiachuangnet.com/weizhifu.png"
						style="width: 116rpx;height:100rpx;">
					</image>
				</view> -->
			</view>
	
			<uni-load-more :status="statusMore" v-show="list.length!=0"></uni-load-more>
		</view>

		<u-popup :show="materialShow" mode="bottom" round="10" @close='close' closeable closeOnClickOverlay>
			<view style='padding:50rpx 30rpx'>
				<view style="font-size: 32rpx;text-align: center;" :style="{color:color}">-&nbsp;&nbsp;补货明细&nbsp;&nbsp;-</view>
				<view class="flex bewteen alignItem" style="font-size:26rpx;text-align: center;margin-top: 50rpx;" >
					<view style="width: 50%;">名称</view>
					<view style="width: 50%;">数量</view>
				</view>
				<scroll-view class="scrollView" scroll-y="true">
					<view class="flex bewteen alignItem" style="font-size:24rpx;text-align: center;padding:20rpx 0;border-bottom:1rpx solid #eee"
					  v-for="(v,i) in materials" :key="i">
						<view style="width: 50%;">{{v.name}}</view>
						<view style="width: 50%;">{{v.buyCount}}</view>
					</view>
				</scroll-view> 
			</view>
		</u-popup>

		<view v-if="loginType===3" class="btn">
			<u-button  :color='color' shape="circle" @click="toPath">去补货</u-button>
		</view>
	</view>
	<view v-else>
		<web-view :webview-styles="webviewStyles" :src="urlAppPay"></web-view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				webviewStyles: {
									progress: {
										color: '#FF3333'
									}
								},
				color: app.globalData.defaultColor,
				options: [{
						text: '取消',
						style: {
							backgroundColor: '#f56c6c'
						}
					},
					{
						text: '查看',
						style: {
							backgroundColor: '#13989a'
						}
					}
				],
				assignTaskId:0,
				isAppPaying:false,
				urlAppPay:'',
				materials: [],
				materialShow:false,
				list: [],
				loginType:null,
				storeType:null,
				isPay:null,// 0未付款 1 已付款
				outStatus:null,//0未出库 1已出库"
				state:null, //1报货2补货 3 售后补发
				pageNumber:1,
				pageSize:10,
				isLoad:false,
				total:1,
				statusMore:'',
				wechatOrderId:'',
				stateList:[{
					value:null,
					text:'全部'
				},{
					value:1,
					text:'报货'
				},{
					value:2,
					text:'补货'
				},{
					value:3,
					text:'售后补发'
				}],
				timer:null,
				isPayList:[
					{
						value:null,
						text:'全部'
					},{
						value:0,
						text:'未支付'
					},{
						value:1,
						text:'已付款'
					}
				],
				outStatusList:[
					{
						value:null,
						text:'全部'
					},{
						value:0,
						text:'待出库'
					},{
						value:1,
						text:'已出库'
					}
				]
			}
	
		},
		onShow() {
			this.pageNumber=1
			this.list=[]
			this.getReplenishmentRecord()
		},
		onLoad(option) {
			this.assignTaskId = option.assignTaskId
			this.storeType=option.storeType
			this.loginType= uni.getStorageSync('loginType')
		},
		onReachBottom(){
			if(this.list.length>=this.total){
				this.statusMore='noMore'
				return
			}
			this.pageNumber++
			this.getReplenishmentRecord()
		},
		methods:{
			throttlePay(wechatOrderId){
				console.log(this.wechatOrderId)
				if(this.timer){
					return uni.$u.toast('提交太频繁了!');
				}
				this.timer=setTimeout(()=>{
					this.timer=null
				},3000)
				this.wechatOrderId=wechatOrderId
				this.payHanler()
				// uni.$u.throttle(this.payHanler,500)
			},
			payHanler(){
				
				// #ifdef APP
				uni.navigateTo({
					url:`/pages/paying/index?wechatOrderId=${this.wechatOrderId}`
				})
				
				// this.isLoad=true
				// uni.$u.http.post('/test/pay2',{
				// 	wechatOrderId:this.wechatOrderId,
				// 	payType:2
				// }).then(res=>{
				// 	if(res){
				// 		this.isAppPaying=true
				// 		this.urlAppPay=res.qr_code
				// 	}
				// 	console.log(res)
				// 	this.isLoad=false
				// })
				// #endif
				
				
				// #ifdef MP-WEIXIN
				this.isLoad=true
				uni.$u.http.post('/test/pay2',{
					wechatOrderId:this.wechatOrderId,
					payType:1
				}).then(res=>{
					if(res){
						let counterUrl=res.counter_url
						counterUrl = decodeURIComponent(counterUrl);
						counterUrl = counterUrl.replace(/\+/g, "%2B");
						wx.navigateToMiniProgram({
						  appId: 'wx889424d565967811',
						  path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${encodeURIComponent(counterUrl)}`,
						  envVersion: 'trial',
						  success(res) {
						    // 打开成功
							 console.log(res)
							 this.wechatOrderId=''
							 this.isLoad=false
						  },
						  fail(res){
							  this.wechatOrderId=''
							  console.log(res)
							  this.isLoad=false
						  }
						})
					}
					this.wechatOrderId=''
					this.isLoad=false
				})
				
				// #endif
				
				
				
			},
			changeState(){
				this.list=[]
				this.pageNumber=1
				this.getReplenishmentRecord()
			},
			getReplenishmentRecord(){
				uni.$u.http.post('/wechat/getWechatOrderList', {
					assignTaskId:this.assignTaskId,
					isPay:this.isPay,
					outStatus:this.outStatus,
					state:this.state,
					pageNumber:this.pageNumber,
					pageSize:this.pageSize
				}).then(res=>{
					console.log(res,'获取补货记录')
					if(res){
						this.list=[...this.list,...res.data]
						this.total=res.total
					}
				})
			},
			toPath(){
				uni.navigateTo({
					url: `/pages/addMaterimal/index?assignTaskId=${this.assignTaskId}&storeType=${this.storeType}`
				})
			},
			close(){
				this.materialShow = false;
			},
			materialList(e){
				console.log(e)
				if(e.index == 1){
					this.materials=this.list[e.name].list
					this.materialShow = true;
				}else{
					
				}
			}
			
		}
	}
</script>

<style lang="scss" scopde>
	::v-deep.select{
		.uni-select{
			border: unset;
		}
	}
	.btn {
		width: 660rpx;
		padding: 45rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-color: white;
		border-top: 1rpx solid #eee;
	}

	.content {
		padding-bottom: 200rpx;
	}
	
	::v-deep.content{
		.u-collapse{
		}
		.u-cell__title-text{
			font-size: 26rpx !important;
			color: #8A8A8A !important;
		}
		.u-cell__body{
			margin-top: 30rpx;
			padding: unset !important;
		}
		.u-collapse-item__content__text{
			padding: unset !important;
		}
	}
	.btn /deep/ .u-button {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.content {
		width: 700rpx;
		margin: 0 auto;
		margint-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
.scrollView{
	min-height: 200rpx;
	max-height: 400rpx;
	margin:30rpx 0;
	width: 100%;
}
	.item {
		width: 660rpx;
		padding: 50rpx 20rpx;
		position: relative;
		margin-bottom: 15rpx;
		.state{
			position: absolute;
			top: 82rpx;
			right: 476rpx;
		}
	}
</style>